/**
 *
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...

// 知识点：localStorage对象
// 作用：存储数据
// 存数据：localStorage.setItem("数据存储的名称",字符串形式数据);
// 取数据：localStorage.getItem("数据存储的名称");
// 取数据的时候如果取不到返回null

// 获取数据的方法
function loadData() {
    let todolist = localStorage.getItem("todolist") ? JSON.parse(localStorage.getItem("todolist")) : [];
    return todolist;
}

// 渲染页面
function render() {
    let todolist = loadData();
    // 渲染界面（数字、列表）
    let toAmount = 0;
    let doAmount = 0;
    let toList = "";
    let doList = "";
    // 循环处理
    todolist.forEach((item, index) => {
        if (item.done) {
            // 已完成
            doAmount++;
            doList += `
            <li>
                <input type="checkbox" value="${item.id}" checked="checked" />
                <p onclick="edit(${item.id})" id="p${item.id}">${item.title}</p>
                <a href="javascript:remove(${item.id})">-</a>
            </li>
            `;
        } else {
            // 未完成
            toAmount++;
            toList += `
            <li>
                <input type="checkbox" value="${item.id}" />
                <p onclick="edit(${item.id})" id="p${item.id}">${item.title}</p>
                <a href="javascript:remove(${item.id})">-</a>
            </li>
            `;
        }
    });
    // 渲染数字
    $("#todocount").text(toAmount);
    $("#donecount").text(doAmount);
    // 渲染列表
    $("ol").html(toList);
    $("ul").html(doList);
}
// 首次渲染
render();

// 数据的保存
function saveData(item) {
    // 处理数据
    let id = localStorage.getItem("id") ? Number(localStorage.getItem("id")) : 1;
    let data = { id: id, title: item, done: false };
    // 获取全部数据
    let todolist = loadData();
    todolist.push(data);
    localStorage.setItem("todolist", JSON.stringify(todolist));
    id++;
    // console.log(id);
    localStorage.setItem("id", id);
}

// 数据添加
// 每个条目的数据最少有3个信息：id（唯一，递增）、title、done
$("form").submit(function(e) {
    // 阻止表单提交
    e.preventDefault();
    let val = $.trim($("#title").val());
    // 数据的保存
    saveData(val);
    // 清除源输入框的内容
    $("#title").val("");
    // 渲染页面
    render();
});

// 状态的切换（给未来元素绑定事件，通过dom操作新增出来原本不存在的元素）
$("section").on("change", "[type=checkbox]", function() {
    // 获取修改的条件
    let id = $(this).val();
    let todolist = loadData();
    // 循环所有的数据，根据id去修改数据的状态
    todolist.forEach((item) => {
        if (id == item.id) {
            item.done = !item.done;
        }
    });
    // 保存数据
    localStorage.setItem("todolist", JSON.stringify(todolist));
    render();
});

// 数据的删除操作
function remove(id) {
    // 删是俩个层面的删：dom层面、数据层面
    let todolist = loadData();
    // 循环处理数据
    todolist.forEach((item, index) => {
        if (id == item.id) {
            todolist.splice(index, 1);
        }
    });
    // 保存数据
    localStorage.setItem("todolist", JSON.stringify(todolist));
    render();
}

// 行内编辑
function edit(id) {
    // 要想编辑（修改数据），获取原先的数据
    let originVal = $("#p" + id).text();
    // 行内编辑需要实现dom的修改（原本的p标签不能编辑）
    // 思路：
    //          1. input实现编辑
    //          2. div标签实现编辑
    // replaceWith是jq里的dom替换方法，还有一个replaceAll
    // contenteditable="true"表示设置该元素可编辑
    $("#p" + id).replaceWith(`<div contenteditable="true" onblur="update(this)" id="${id}">${originVal}</div>`);
}

// 数据的修改方法
function update(obj) {
    // console.log(obj);
    let newVal = $(obj).text();
    let id = $(obj).attr("id");
    let todolist = loadData();
    todolist.forEach((item) => {
        if (id == item.id) {
            item.title = newVal;
        }
    });
    // 保存数据
    localStorage.setItem("todolist", JSON.stringify(todolist));
    render();
}